<template>
  <view>
    <nav-bar title="专家详情"></nav-bar>
    <view class="top-info">
      <view class="info-box">
        <view>
          <image class="user-img" :src="userInfo.proPhoto.includes('http') ? userInfo.proPhoto : baseUrl + userInfo.proPhoto" />
        </view>
        <view class="user-info">
          <view class="name-box">
            <view class="user-name">{{ userInfo.proName }}</view>
            <view class="user-title">{{ userInfo.professionalTitle }}</view>
          </view>
          <view class="hospital-box">
            <view class="user-hospital">{{ userInfo.hospital }}</view>
            <view class="user-department">{{ userInfo.department }}</view>
          </view>
        </view>

      </view>
      <view class="introduction">
        <image class="comma-top" :src="baseIconUrl + '/userIcon/icon_quotation_mark_left.png'" />
        擅长: {{ userInfo.briefText }}
        <image class="comma-down" :src="baseIconUrl + '/userIcon/icon_quotation_mark_right.png'" />
      </view>
    </view>
    <scroll-view scroll-y :style="{ height: scrollHeight }">
      <view class="user-detail">
      <view class="order-box">
        <view class="order-title">
          <view class="user-left">
          <image class="user-icon" :src="baseIconUrl + '/userIcon/icon_expert.png'" />
          <view class="title">医师介绍</view>
          </view>
          <!-- <view class="view-all">查看全部<uni-icons type="right" size="14" color="#999"></uni-icons></view> -->
        </view>
        <!-- <view class="user-content">{{ userInfo.detailInfo }}</view> -->
        <rich-text class="user-content" :nodes="userInfo.detailInfo"></rich-text>
      </view>
    </view>
    </scroll-view>

  </view>
</template>

<script>
  import api_professor from '@/api/user.js'
  import { baseUrl, baseIconUrl } from '@/config'
  export default {
    name: 'ExpertTeamDetail',

    data() {
      return {
        baseUrl,
        baseIconUrl,
        userInfo: {}, 
        scrollHeight: '',
        id: null
      }
    },
    onLoad(options) {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 264 + 'px'
      this.id = Number(options.id) || ""
      this.getDetail()
    },
    mounted() {
      
    },

    methods: {
      getDetail() {
        api_professor.professorDetail(this.id).then(res => {
          const result = res.data
          result.detailInfo = result.detailInfo && result.detailInfo.replace(/\n/g, '<br/>')
          this.userInfo = result
          if(!this.userInfo.proPhoto) return
      })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .top-info {
    padding: 50rpx 30rpx 0;
    background: linear-gradient(to bottom, #5992e3, transparent);
    .info-box {
      display: flex;
      align-items: center;
      .user-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        // background-color: #726c73;
        margin-left: 32rpx;
      }
      .user-info {
        flex: 1;
        margin: 0 30rpx;
        .name-box {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          .user-name {
            margin-right: 10rpx;
            font-size: 36rpx;
            font-weight: 500;
            color: #FFF;
          }
          .user-title{
            // width: 120rpx;
            // height: 36rpx;
            padding: 5rpx;
            line-height: 36rpx;
            border-radius: 8rpx;
            background-color: rgba(255, 255, 255, 0.3);
            color: #fff;
            display: block;
            text-align: center;
            font-size: 24rpx;
          }
        }
        .hospital-box{
          display: flex;
          color: #FFF;
          .user-department {
          margin-left: 20rpx;
        }
        }
      }
      .edit-btn {
        color: rgba(255, 255, 255, .7);
      }
    }
    .introduction {
      margin: 50rpx 0 30rpx;
      padding: 38rpx 65rpx 38rpx 65rpx;
      border-radius: 16rpx;
      background-color: #FFF;
      font-size: 28rpx;
      color: #999;
      position: relative;
      .comma-top{
       width: 32rpx;
       height: 32rpx;
       position: absolute;
       top: 20rpx;
       left: 20rpx;
      }
      .comma-down{
       width: 32rpx;
       height: 32rpx;
       position: absolute;
       bottom: 20rpx;
       right: 20rpx;
      }
    }
  }
  .user-detail{
    padding: 50rpx 30rpx 0;
    .user-left{
      display: flex;
      .user-icon{
      width: 40rpx;
      height: 40rpx;
    }
    }
    .order-box {
      background-color: #FFF;
      .order-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 30rpx;
        .title {
          font-size: 28rpx;
          font-weight: 500;
        }
        .view-all {
          display: flex;
          align-items: center;
          color: #999;
        }
      }
      .order-operate {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .operate-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 14rpx 0 30rpx;
          .operate-icon {
            width: 52rpx;
            height: 52rpx;
            margin-bottom: 14rpx;
            background-color: #115BAA;
          }
          .text {
            color: #676767;
          }
        }
      }
    }
    .user-content{
      display: block;
      padding: 0rpx 30rpx 30rpx 30rpx;
      font-size:28rpx;
      color: #666;
    }
  }
</style>
